<template>
  <div>
    <!-- 搜索 -->
    <div class="one">
      <el-row type="flex">
        <el-col class="ico">
          <i class="el-icon-office-building"></i>
          <span v-if="titleName">地产列表 - {{ titleName }}</span>
          <span v-else>所有地产列表</span>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table :data="proList" border style="width: 100%" class="table">
        <el-table-column
          prop="image"
          label="房产图片"
          width="350px"
          align="center"
        >
          <template #default="{ row }">
            <img :src="row.image" alt="" style="height: 200px" />
          </template>
        </el-table-column>

        <el-table-column label="房产介绍" align="center">
          <template #default="{ row }">
            <h1>{{ row.title }}</h1>
            <p v-html="row.desc"></p>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
    </div>
  </div>
</template>

<script>
import { getPropertyList } from "../../api/property";
export default {
  data() {
    return {
      //通过cotegoryId,agentId,模糊title_contains搜索
      cotegoryId: this.$route.query.cotegoryId,
      agentId: this.$route.query.agentId,
      title_contains: this.$route.query.title_contains,
      titleName: this.$route.query.titleName, //显示标题而已

      proList: [],
      msg: "<h1>我是小书生-测试</h1>",
    };
  },
  created() {
    this.getProList();
  },
  mounted() {
    console.log(this.proId);
  },
  methods: {
    async getProList() {
      const { data } = await getPropertyList({
        category: this.cotegoryId,
        agent: this.agentId,
        title_contains: this.title_contains,
      });
      console.log(58, data);
      this.proList = data;
    },
  },
};
</script>

<style scoped>
.header {
  margin-bottom: 25px;
  border-bottom: 1px solid #dcdfe6;
}
.searchinp {
  margin-bottom: 20px;
}
.search {
  background-color: #f5f7fa;
  color: #ccc;
  border-color: #ccc;
}
.pageborder {
  height: 60px;
  margin-top: 30px;
  border-top: 2px solid #dcdfe6;
}
.operation {
  margin-top: 20px;
}
.seach {
  margin-bottom: 30px;
}
.one {
  width: 83%;
  margin: 30px auto;
}
.ico {
  font-size: 25px;
  color: rgb(238, 177, 8);
  font-weight: 700;
  padding-bottom: 20px;
}
img {
  /* 进行图片裁切 */
  object-fit: cover;
}
</style>